<script setup>
import { ref } from 'vue'
import { useAdminStore } from '@/stores/adminStore'
const checkcode = ref('123')

// 登录表单
const loginForm = ref({
  username: '',
  password: '',
  code: ''
})

// 注册表单
const regForm = ref({
  username: '',
  password: '',
  authority: '1',
  code: ''
})

// 验证验证码
const checkCode = (rule, value, callback) => {
  if (value === '') {
    return callback(new Error('验证码不能为空'))
  }
  if (value !== checkcode.value) {
    return callback(new Error('验证码错误'))
  }
    callback()
}
// 规则列表
const rules = ref({
  username: [{ trigger: 'blur', required: true, message: '用户名不能为空' }],
  password: [{ trigger: 'blur', required: true, message: '密码不能为空' }],
  code: [{ validator: checkCode, trigger: 'blur', required: true, message: '验证码不能为空' }]
})

//点击弹出注册框
const regflag = ref(false)
const onReg = () => {
  regflag.value = true
}

const useAdmin = useAdminStore()
const doLogin = () => {
  useAdmin.getAdminInfo(loginForm.value)
}

</script>
<template>
  <div :class="{ test1: regflag }"></div>
  <div id="container">
    <!-- logo图片 -->
    <div id="logo"></div>
    <!-- 背景图片 -->
    <div id="bcg-img"></div>
    <!-- 字体 -->
    <div id="words"></div>
    <!-- 登录 -->
    <div id="login">
      <div id="form">
        <h1>Login</h1>
        <el-form :model="loginForm" status-icon label-width="120px" :rules="rules">
          <el-form-item label="用户名：" prop="username">
            <el-input type="" autocomplete="off" v-model="loginForm.username" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" autocomplete="off" v-model="loginForm.password" />
          </el-form-item>
          <el-form-item label="验证码：" prop="code">
            <el-input type="" v-model="loginForm.code" class="code" />
            <div id="checkcode">验证码</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="cir" :class="{ isreg: regflag }" @mouseleave="leaveReg">
      <div id="inreg">
        <el-icon size="5em" color="#e1e1e1" @click="onReg"><i-ep-ArrowLeftBold /></el-icon>
      </div>
      <div id="reg">
        <el-form :model="regForm" status-icon label-width="120px" :rules="rules">
          <el-form-item label="用户名：" prop="username">
            <el-input type="" autocomplete="off" v-model="regForm.username" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" autocomplete="off" v-model="regForm.password" />
          </el-form-item>
          <el-form-item label="权限：">
            <el-radio-group v-model="regForm.authority">
              <el-radio label="1" size="large" border>管理员</el-radio>
              <el-radio label="0" size="large" border>普通员工</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="验证码：" prop="code">
            <el-input type="" v-model="regForm.code" class="code" />
            <div id="checkcode">验证码</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#container {
  background-color: #f8c6b5;
  position: absolute;
  width: 100%;
  height: 100%;
}
#logo {
  width: 250px;
  height: 100px;
  background-image: url('@/assets/images/logo.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#bcg-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-75%, -50%);
  background-image: url('@/assets/images/bgc-image.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  height: 400px;
}
#words {
  width: 200px;
  height: 600px;
  position: relative;
  top: 5%;
  left: 5%;
  background-image: url('@/assets/images/word.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#login {
  width: 700px;
  height: 600px;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20%, -50%);
  background-color: #ffff;
  border-radius: 40px;
  box-shadow: 0 0 6px 1px #f6f6f6;
  z-index: 1;
}

#form {
  background-color: #f6f6f6;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  text-align: center;
  box-shadow: 0 0 6px 1px #f6f6f6;
  font-size: larger;
}

.el-input {
  background-color: transparent;
  width: 400px;
  height: 40px;
}

.el-form-item {
  position: relative;
  left: 53%;
  margin-top: 60px;
  transform: translate(-45%, -50%);
}
.el-button {
  width: 100px;
  height: 40px;
  position: relative;
  left: 50%;
  transform: translate(-130%, -50%);
}
h1 {
  color: #ffff;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  font-family: sans-serif;
}
.code {
  width: 160px;
}
#checkcode {
  margin-left: 40px;
  width: 200px;
  height: 60px;
  border: 1px solid black;
}

.cir {
  width: 490px;
  height: 600px;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50% 0 0 50%;
  transform: translate(-140px, -50%);
  background-color: #f6f6f6;
  box-shadow: 0 0 6px 1px #f6f6f6;
  animation: moveCir 2s ease-in-out forwards;
  text-align: center;
}

//点击将注册页面伸出
.isreg {
  width: 650px;
  animation: regging 2s ease-in-out forwards;
}

#inreg {
  position: relative;
  top: 50%;
  transform: translate(-45%, -50%);
}

@keyframes moveCir {
  from {
    transform: translate(-140px, -50%);
  }
  to {
    transform: translate(-140px, -50%) translateX(-100px);
  }
}

@keyframes regging {
  from {
    transform: translate(-140px, -50%) translateX(-100px);
  }
  to {
    transform: translate(-140px, -50%) translateX(-600px);
  }
}
</style>
